<template>
	<view class="container">
		<view>
			<view class='addAddress'>
				<view class="pad30 mt-22">
					<view class='list borderRadius15'>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>收货人</view>
							<view class="address acea-row row-between">
								<input type='text' placeholder='收货人的姓名' name='receiver' v-model="userAddress.receiver"
									placeholder-class='placeholder' class="detail"></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>手机号码</view>
							<view class="address">
								<input type='number' placeholder="收货人的手机号" name="phone" v-model='userAddress.phone'
									placeholder-class='placeholder' class="detail" pattern="\d*"></input>
							</view>
							<view class="phone-icon">
								<text>+86</text>
								<view style="margin-top: 4rpx;">
									<u-icon name="arrow-right" size="24rpx" color="rgb(144, 147, 153)"></u-icon>
								</view>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>所在地区</view>
							<view class="address acea-row row-between" @click="openPicker">
								<input type='text' placeholder='省,市,区,街道' name='location'
									placeholder-class='placeholder' v-model='userAddress.location' class="detail"
									disabled></input>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name'>详细地址</view>
							<view class="address">
								<textarea placeholder='小区楼栋/乡村名称' style="height: 200rpx;width: 100%;" class="detail"
									placeholder-class='placeholder' v-model="userAddress.detailedAddress"></textarea>
							</view>
						</view>
						<view class='item acea-row row-between-wrapper'>
							<view class='name' style="white-space: nowrap;">设为默认收货地址</view>
							<u-switch v-model="userAddress.isDefault" :inactiveValue="0" :activeValue="1"
								activeColor="#f74062"></u-switch>
						</view>
					</view>
				</view>
				<view class="button">
					<view class="button-view" @click="handleSubmit">
						<u-loading-icon mode="circle" :size="14" v-if="buttonLoading" />
						<text style="margin-left: 14rpx;">保存</text>
					</view>
				</view>
			</view>
		</view>

		<lotus-address v-on:choseVal="choseValue" ref="winglau14-otusAddress" :lotusAddressData="lotusAddressData">
		</lotus-address>
	</view>
</template>
<script>
	import lotusAddress from './components/Winglau14-lotusAddress/Winglau14-lotusAddress.vue';
	import {
		addressDetails,
		addressEdit,
		addressAdd
	} from "@/http";
	export default {
		components: {
			lotusAddress
		},
		data() {
			return {
				value: false,
				userInfo: {},
				buttonLoading: false,
				lotusAddressData: {
					visible: false,
					provinceName: '',
					cityName: '',
					townName: '',
				},
				userAddress: {
					isDefault: 0,
					location: "",
					phone: "",
					receiver: "",
					userPhone: "",
					detailedAddress: ""
				}, //地址详情
				addressValue: "",
				status: null
			}
		},
		async onLoad(options) {
			this.userInfo = uni.getStorageSync('userInfo');
			if (options.status) { //修改
				this.status = options.status
				uni.setNavigationBarTitle({
					title: '修改收货地址'
				});
				let res = await addressDetails(options.status);
				Object.keys(this.userAddress).forEach(item => {
					this.userAddress[item] = res.data.data[item];
				});
			} else {
				uni.setNavigationBarTitle({
					title: '添加收货地址'
				})
			};
			// 赋值手机号
			this.userAddress.userPhone = this.userInfo.phone;
		},
		methods: {
			async handleSubmit() {
				if(this.buttonLoading) return;
				try{
					let reg1 = /^1[3456789]\d{9}$/;
					if(!reg1.test(this.userAddress.phone)){
						return uni.showToast({
							title:"手机号格式错误",
							icon:"error"
						});
					};
					this.buttonLoading = true;
					if (this.status) { //修改
						let res = await addressEdit({
							...this.userAddress,
							id: this.status
						});
					} else {
						let res = await addressAdd(this.userAddress);
					};
					this.buttonLoading = false;
					uni.navigateBack();
				}catch(err){
					this.buttonLoading = false;
					console.log('错误提示：',err)
				}
			},
			formSubmit() {
				this.$emit('addressConfirm', this.userAddress)
			},
			//打开picker
			openPicker() {
				// console.log(this.lotusAddressData)
				this.lotusAddressData.visible = true;
				this.lotusAddressData.provinceName = '北京';
				this.lotusAddressData.cityName = '北京市';
				this.lotusAddressData.townName = '东城区';
			},
			//回传已选的省市区的值
			choseValue(res) {
				//res数据源包括已选省市区与省市区code
				// console.log(res);
				this.lotusAddressData.visible = res.visible; //visible为显示与关闭组件标识true显示false隐藏
				//res.isChose = 1省市区已选 res.isChose = 0;未选
				if (res.isChose) {
					this.lotusAddressData.provinceName = res.province; //省
					this.lotusAddressData.cityName = res.city; //市
					this.lotusAddressData.townName = res.town; //区
					this.userAddress.location = `${res.province} ${res.city} ${res.town}`; //region为已选的省市区的值
				}
			}
		},
	}
</script>
<style lang="scss" scoped>
	.container {
		padding-top: 20rpx;
	}

	.pad30 {
		padding: 0 30rpx
	}

	.p_center {
		text-align: center;
	}

	.acea-row {
		display: flex;
	}

	.row-middle {
		align-items: center
	}

	.row-between-wrapper {
		justify-content: space-between;
		position: relative;

		.phone-icon {
			position: absolute;
			top: 50%;
			right: 20rpx;
			transform: translate(0, -50%);
			display: flex;
			align-items: center;
			color: #666666;
			font-size: 24rpx;

			text {
				padding-right: 10rpx;
			}
		}
	}

	.borderRadius15 {
		border-radius: 15rpx !important;
	}

	.fontcolor {
		color: var(--view-theme);
	}

	.addAddress .list {
		background-color: #fff;
	}

	.addAddress .list .item {
		padding: 20rpx 0;
		position: relative;
	}

	.addAddress .list .item .detail {
		width: 368rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item .location {
		position: absolute;
		right: 46rpx;
		top: 50%;
		margin-top: -40rpx !important;
		font-size: 24rpx;
		text-align: center;
	}

	.addAddress .list .item .icon-dizhi {
		font-size: 36rpx !important;
	}

	.addAddress .list .item .name {
		width: 160rpx;
		font-size: 30rpx;
		color: #333;
		padding: 20rpx 0;
		font-weight: bold;
	}

	.addAddress .list .item .address {
		flex: 1;
		background-color: #f2f2f2;
		padding: 20rpx 35rpx;
		border-radius: 18rpx;
	}

	.addAddress .list .item .address .addressCon {
		width: 360rpx;
	}

	.addAddress .list .item .address .addressCon .tip {
		font-size: 21rpx;
		margin-top: 4rpx;
	}

	.addAddress .list .item input {
		// width: 475rpx;
		flex: 1;
		font-size: 30rpx;
	}

	.placeholder {
		color: #ccc;
	}

	.addAddress .list .item .picker {
		width: 430rpx;
		font-size: 30rpx;
	}

	.addAddress .list .item .iconfont {
		font-size: 30rpx;
		margin-top: 4rpx;
	}

	.addAddress .default {
		padding: 0 30rpx;
		height: 90rpx;
		background-color: #fff;
	}

	.addAddress .default checkbox {
		margin-right: 15rpx;
	}

	.addAddress .keepBnt {
		width: 690rpx;
		height: 86rpx;
		border-radius: 50rpx;
		text-align: center;
		line-height: 86rpx;
		margin: 50rpx auto;
		font-size: 32rpx;
		color: #fff;
	}


	.mt-22 {
		margin-top: 22rpx;
	}

	.bg-color {
		background-color: #dd524d;
	}

	.button {
		box-sizing: border-box;
		padding-top: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		.button-view {
			width: 600rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			background-color: #f74062;
			border-radius: 10rpx;
			color: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: center;
		}
	}
</style>
